<template>
	<view class="container" :style="pageHeight">
		<view class="box-1">
			<scroll-view 
				scroll-y 
				refresher-background="transparent"
				style="height: 100%;" 
				:refresher-enabled="false"
				:scroll-with-animation="false"
			>
				<view class="talk-list">
					<view 
						v-for="(item,index) in talkList" 
						:key="item.id" 
						:id="'msg-'+item.id"
					>
						<view class="item flex-col" :class=" item.type == 1 ? 'push':'pull' ">
							<image :src="item.pic" mode="aspectFill" class="pic"></image>
							<view class="content">
								<template v-if="item.type === 2">
									<zero-markdown-view :markdown="item.content"></zero-markdown-view>
								</template>
								<template v-else>
									{{item.content}}
								</template>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="box-2">
			<view class="flex-col">
				<view class="flex-grow">
					<input type="text" class="content" v-model="content" placeholder="请输入内容" placeholder-style="color:#DDD;" :cursor-spacing="6">
				</view>
				<button class="send" :disabled="isLoading" @tap="handleSendClick">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStorageSync} from '@/static/utils'
	export default {
		data() {
			return {
				// 滚动容器
				scrollView:{
					refresherTriggered:false,
					intoView:"",
					safeAreaHeight:0
				},
				// 聊天列表数据
				talkList:[],
				// 发送内容
				content:'',
				userInfo:{}
			}
		},
		computed:{
			// 页面高度
			pageHeight(){
				const safeAreaHeight = this.scrollView.safeAreaHeight;
				if(safeAreaHeight > 0){
					return `height: calc(${safeAreaHeight}px - var(--window-top));`
				}
				return "";
			}
		},
		onLoad() {
			this.userInfo = getStorageSync('userInfo') || {}
			// #ifdef H5
			this.scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
			// #endif
		},
		methods: {
			// 发送信息
			handleSendClick(){
				if(this.isLoading) return;
				if(!this.content){
					uni.showToast({
						title:'请输入有效的内容',
						icon:'none'
					})
					return;
				}
				this.sendMessage(this.content,'text');
				// 清空内容框中的内容
				this.content = '';
			},
			// 处理图片点击
			handleImageClick(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'],
					sourceType: ['album','camera'],
					success: (res)=> {
						const imageUrl = res.tempFilePaths[0];
						this.sendMessage(imageUrl,'image');
					}
				});
			},
			sendMessage(content,contentType = 'text'){
				// 将当前发送信息 添加到消息列表。
				let data = {
					id:new Date().getTime(),
					content,
					contentType,
					type:1,
					pic: this.userInfo.avatar || "https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/pic.png"
				}
				this.talkList.unshift(data);
				uni.showLoading({
					title:"思考中",
					mask:true
				})
				this.getGPTmessage(content);
			},
			getGPTmessage(content){
				uni.request({
					url: 'https://api.deepseek.com/chat/completions',
					header:{
						"Content-Type":"application/json",
						"Authorization":"Bearer sk-6bc8a2ad3809402da36982997c8f0fb9"
					},
					method:"POST",
					data: {
					  "model": "deepseek-chat",
						"messages": [
							{"role": "user", "content":content }
						],
					},
					success: (res) => {
						console.log(res.data);
						let data = {
							id:new Date().getTime(),
							content:res.data.choices[0].message.content,
							contentType:"text",
							type:2,
							pic:"https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/GPT.png"
						}
						this.talkList.unshift(data);
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./global.scss";
	.zero-markdown-view {
		padding: 0 !important;
	}

	page{
		background-color: #F3F3F3;
		font-size: 28rpx;
	}
	.container{
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: stretch;
	}
	
	/* 加载数据提示 */
	.tips{
		position: fixed;
		left: 0;
		top:var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0,0,0,0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform:translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;
		
		&.show{
			transform:translateY(0);
		}
	}
	
	.box-1{
		width: 100%;
		height: 0;
		flex: 1 0 auto;
		box-sizing: content-box;
	}
	.box-2{
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;
		
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
		
		>view{
			padding: 0 20rpx;
			height: 100rpx;
		}
		
		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}
		
		.send{
			background-color: #42b983;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;
			
			&:active{
				background-color: #5fc496;
			}
		}
	}
	
	.talk-list{
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: flex-end;
		align-items: stretch;
		
		// 添加弹性容器，让内容自动在顶部
		&::before{
			content: '.';
			display: inline;
			visibility: hidden;
			line-height: 0;
			font-size: 0;
			flex: 1 0 auto;
			height: 1px;
		}
		
		
		/* 消息项，基础类 */
		.item{
			padding: 20rpx 20rpx 0 20rpx;
			align-items:flex-start;
			align-content:flex-start;
			color: #333;
			
			.pic{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}
			
			.content{
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}
			
			/* 收到的消息 */
			&.pull{
				.content{
					margin-left: 32rpx;
					background-color: #fff;
					
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}
			
			/* 发出的消息 */
			&.push{
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;
				
				.content{
					margin-right: 32rpx;
					background-color: #a0e959;
					
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>